import { useState } from "react";
import styles from './index.less';
import { Button, Flex } from "antd";
import { motion, AnimatePresence, useAnimate, LayoutGroup } from 'motion/react';

export default () => {

    const [visible, setvisible] = useState<boolean>(true);
    const [presenceVisible, setPresenceVisible] = useState<boolean>(true);
    const [framesVisible, setFramesVisible] = useState<boolean>(true);
    const [layoutVisible, setLayoutVisible] = useState<boolean>(true);
    const [layoutVisible2, setLayoutVisible2] = useState<boolean>(true);

    const [scope, animate]= useAnimate();
    const [scope2, animate2]= useAnimate();
    const [scope3, animate3]= useAnimate();
    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <p>切换动画</p>

                <Button
                    onClick={() => {
                        setvisible(!visible);
                    }}
                >
                    {visible ? "隐藏" : "显示"}
                </Button>

                {visible && (
                    <motion.div
                        className={styles.motionView}
                        initial={{
                            scale: 0.2,
                            rotate: 135,
                            opacity: 0,
                        }}
                        animate={{
                            scale: 1,
                            rotate: 0,
                            opacity: 1,
                        }}
                    >
                        M
                    </motion.div>
                )}
            </div>

            <div className={styles.card}>
                <p>Presence保留</p>

                <Button
                    onClick={() => {
                        setPresenceVisible(!presenceVisible);
                    }}
                >
                    {presenceVisible ? "隐藏" : "显示"}
                </Button>

                <AnimatePresence>
                    {presenceVisible && (
                        <motion.div
                            className={styles.motionView}
                            initial={{
                                scale: 0.2,
                                rotate: "135deg",
                                opacity: 0,
                            }}
                            animate={{
                                scale: 1,
                                rotate: "0deg",
                                opacity: 1,
                            }}
                            exit={{
                                opacity: 0,
                                rotate: "-90deg",
                                scale: 0.2,
                            }}
                        >
                            M
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>

            <div className={styles.card}>
                <p>关键帧序列</p>

                <Button
                    onClick={() => {
                        setFramesVisible(!framesVisible);
                    }}
                >
                    {framesVisible ? "隐藏" : "显示"}
                </Button>

                {framesVisible && (
                    <motion.div
                        className={styles.motionView}
                        animate={{
                            scale: [1, 2, 2, 1, 1],
                            rotate: [0, 0, 270, 270, 0],
                            borderRadius: ["20%", "20%", "50%", "50%", "20%"],
                        }}
                        transition={{ duration: 2 }}
                    >
                        M
                    </motion.div>
                )}
            </div>

            <div className={styles.card} >
                <motion.p layout>Layout跟随</motion.p>

                <motion.button
                    layout
                    transition={{ duration: 0.8 }}
                    onClick={() => {
                        setLayoutVisible(!layoutVisible);
                    }}
                >
                    {layoutVisible ? "隐藏" : "显示"}
                </motion.button>

                <AnimatePresence mode="popLayout">
                    {layoutVisible && (
                        <motion.div
                            className={styles.motionView}
                            initial={{
                                scale: 0.2,
                                rotate: "135deg",
                                opacity: 0,
                            }}
                            animate={{
                                scale: 1,
                                rotate: "0deg",
                                opacity: 1,
                            }}
                            transition={{ duration: 0.8 }}
                        >
                            M
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>

            <div className={styles.card} >
                <motion.p layout>LayoutGroup</motion.p>

                <motion.button
                    layout
                    transition={{ duration: 0.8 }}
                    onClick={() => {
                        setLayoutVisible2(!layoutVisible2);
                    }}
                >
                    {layoutVisible2 ? "隐藏" : "显示"}
                </motion.button>

                <LayoutGroup>
                    {layoutVisible2 && (
                        <motion.div
                            className={styles.motionView}
                            initial={{
                                scale: 0.2,
                                rotate: "135deg",
                                opacity: 0,
                            }}
                            animate={{
                                scale: 1,
                                rotate: "0deg",
                                opacity: 1,
                            }}
                            transition={{ duration: 0.8 }}
                        >
                            M
                        </motion.div>
                    )}
                </LayoutGroup>
            </div>

            <div className={styles.card2}>
                <p>repeatType循环模式</p>

                <Flex gap="small" wrap align="center">
                    <Button
                        size="small"
                        onClick={() => {
                            animate(scope.current, { scale: 1.5, rotate: 360 }, { repeat: Infinity, repeatType: 'loop', duration: 1 });
                        }}
                    >loop</Button>
                    <Button
                        size="small"
                        onClick={() => {
                            animate(scope.current, { scale: 1.5, rotate: 360 }, { repeat: Infinity, repeatType: 'reverse', duration: 1 });
                        }}
                    >reverse</Button>
                    <Button
                        size="small"
                        onClick={() => {
                            animate(scope.current, { scale: 1.5, rotate: 360 }, { repeat: Infinity, repeatType: 'mirror', duration: 1 });
                        }}
                    >mirror</Button>
                </Flex>

                <div
                    ref={scope}
                    className={styles.motionView}
                >
                    M
                </div>
            </div>

            <div className={styles.card3}>
                <p>自定义ease(少用)</p>

                <Button
                    onClick={async () => {
                        await animate2(scope2.current, { translateX: 300 }, { duration: 1, ease: [0.17, 0.67, 0.83, 0.67] });
                    }}
                >开始动画</Button>

                <div style={{ width: '100%', height: 100 }}>
                    <div
                        ref={scope2}
                        className={styles.motionView}
                    >
                        M
                    </div>
                </div>
            </div>

            <div className={styles.card3}>
                <p>spring插值(多参数共同配合)</p>

                <Button
                    onClick={async () => {
                        await animate3(scope3.current, { translateX: 300 }, { duration: 1, type: 'spring', bounce: 0.75, damping: 3, mass: 1, stiffness: 100, velocity: 1 });
                        animate3(scope3.current, { translateX: 0 }, { duration: 0, delay: 0.5 });
                    }}
                >开始动画</Button>

                <div style={{ width: '100%', height: 100 }}>
                    <div
                        ref={scope3}
                        className={styles.motionView}
                    >
                        M
                    </div>
                </div>
            </div>
        </div>
    );
}